<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import type { ArticleRecord } from '/@/api/model/articleModel';
  import { queryArticleList } from '/@/api/recommend';
  import { useGlobalScroll } from '/@/hooks/useScroll';
  const route = useRoute();
  // 距离底部 100 px 时触发
  const { arrivedState } = useGlobalScroll({ offset: { bottom: 100 } });

  // 文章列表
  const articleList = ref<ArticleRecord[]>([]);
  const page = ref(1);
  const articleListLoading = ref(false);
  const user_id = ref<number>();

  watch(
    () => route.params.id,
    (id) => {
      user_id.value = parseInt(Array.isArray(id) ? id[0] : id, 10) ?? 0;
    },
    { immediate: true },
  );

  watch(
    [page],
    async ([page]) => {
      if (articleListLoading.value) return;
      articleListLoading.value = true;
      const result = await queryArticleList({
        column_id: '',
        user_id: user_id.value,
        page,
        size: 20,
      });
      articleList.value.push(...result.list);
      articleListLoading.value = false;
    },
    { immediate: true },
  );
  watch(
    () => arrivedState.bottom,
    (isReachBottom) => {
      if (isReachBottom) {
        if (articleListLoading.value) return;
        page.value++;
      }
    },
  );
</script>
<template>
  <div class=" ">
    <a-card :bordered="false">
      <a-row>
        <a-col :span="8" class="font-[900] text-[15px]"> 文章 </a-col>
        <a-col :span="1" :offset="13" class="text-center">
          <div>热门</div>
        </a-col>
        <a-col :span="1" class="text-center">
          <a-divider direction="vertical" />
        </a-col>
        <a-col :span="1" class="text-center">
          <div>最新</div>
        </a-col>
      </a-row>
      <a-divider class="my-[10px]" />
      <a-skeleton animation v-if="articleListLoading">
        <a-space direction="vertical" :style="{ width: '100%' }" size="large">
          <a-skeleton-line :rows="10" />
        </a-space>
      </a-skeleton>
      <a-list :bordered="false">
        <a-list-item
          class="posdts-list-item"
          action-layout="vertical"
          v-for="item in articleList"
          :key="item.id"
        >
          <template #actions>
            <span class="text-[#8A919F]"><IconEye /> {{ item.read }}</span>
            <span class="text-[#8A919F]"><IconMessage /> {{ item.recommend }}</span>
          </template>
          <template #extra v-if="item.cover">
            <div className="image-area" class="mt-[40px]">
              <img alt="arco-design" :src="item.cover" class="w-[120px] h-[90px] rounded-[3px]" />
            </div>
          </template>
          <a-list-item-meta>
            <template #description>
              <div>
                <span class="text-black">{{ item.user_name }}</span>
                <a-divider direction="vertical" />
                <span class="text-[12px] text-[#8A919F]">{{ $timeAgo(item.createTime) }}</span>
                <a-divider direction="vertical" />
                <span>
                  <a-tag
                    color="gray"
                    size="small"
                    class="text-[12px] ml-[5px]"
                    v-for="(tag, index) in item.tag.split(',')"
                    :key="index"
                  >
                    {{ tag }}
                  </a-tag>
                </span>
              </div>
              <div class="mt-[10px] pr-[20px]">
                <a-typography-paragraph
                  :ellipsis="{
                    rows: 2,
                  }"
                  class="font-black text-[#252933] text-[16px] mb-[5px]"
                >
                  {{ item.title }}
                </a-typography-paragraph>
                <a-typography-paragraph
                  :ellipsis="{
                    rows: 2,
                  }"
                  class="text-[#8a919f] font-[500] text-[13px] mb-[0px]"
                >
                  {{ item.brief }}
                </a-typography-paragraph>
              </div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
      <div class="mt-[10px] text-center font-[700] text-[#72777b]">没有更多了～</div>
    </a-card>
  </div>
</template>
<style scoped>
  .posdts-list-item {
    padding: 8px 0px !important;
  }
</style>
